<template>
    <div class="newsinfo-container">
        <!-- 大标题区 -->
        <h3 class="title">{{newsinfo.title}}</h3>
        <!-- 子标题区 -->
       <p class="subtitle">
           <span>发表时间:{{newsinfo.add_time}}</span>
           <span>点击：{{newsinfo.click}}次</span>
       </p>
       <hr>
       <!-- 内容区 -->
       <div class="content" v-html="newsinfo.content"></div>
       <!-- 渲染子组件评论区 -->
       <comment-box :id="this.id"></comment-box>
    </div>
</template>

<script>
//在dom元素中直接获取id获取id的手段就是{{$route.params.id}}
//挂载在js 中的data元素上就是id： this.$route.params.id  此时dom元素就可直接获取{{id}}
 import {Toast} from 'mint-ui'
 import comment from '../subcompoments/comment.vue'
 export default {
   
    data(){
        return {
            id : this.$route.params.id,
            newsinfo : {},
            newsinfos :[
                {
                id:1,
                title:'秀秀',
                click:33,
                add_time:'2019-04-06 23:45:43',
                content:'1我原谅你的那些事情了，我感觉你很喜欢我，我知道你应该是认真的，不管你之后会对我做出什么希望我们永远能在一起开开心心的。'

            },
                       {
                id:2,
                title:'秀秀',
                click:33,
                add_time:'2019-04-06 23:45:43',
                content:'2我原谅你的那些事情了，我感觉你很喜欢我，我知道你应该是认真的，不管你之后会对我做出什么希望我们永远能在一起开开心心的。'

            },
                       {
                id:3,
                title:'秀秀',
                click:33,
                add_time:'2019-04-06 23:45:43',
                content:'3我原谅你的那些事情了，我感觉你很喜欢我，我知道你应该是认真的，不管你之后会对我做出什么希望我们永远能在一起开开心心的。'

            },
                       {
                id:4,
                title:'秀秀',
                click:33,
                add_time:'2019-04-06 23:45:43',
                content:'4我原谅你的那些事情了，我感觉你很喜欢我，我知道你应该是认真的，不管你之后会对我做出什么希望我们永远能在一起开开心心的。'

            },
                       {
                id:5,
                title:'秀秀',
                click:33,
                add_time:'2019-04-06 23:45:43',
                content:'5我原谅你的那些事情了，我感觉你很喜欢我，我知道你应该是认真的，不管你之后会对我做出什么希望我们永远能在一起开开心心的。'

            },
                       {
                id:6,
                title:'秀秀',
                click:33,
                add_time:'2019-04-06 23:45:43',
                content:'6我原谅你的那些事情了，我感觉你很喜欢我，我知道你应该是认真的，不管你之后会对我做出什么希望我们永远能在一起开开心心的。'

            },
                       {
                id:7,
                title:'秀秀',
                click:33,
                add_time:'2019-04-06 23:45:43',
                content:'7我原谅你的那些事情了，我感觉你很喜欢我，我知道你应该是认真的，不管你之后会对我做出什么希望我们永远能在一起开开心心的。'

            },
                       {
                id:8,
                title:'秀秀',
                click:33,
                add_time:'2019-04-06 23:45:43',
                content:'8我原谅你的那些事情了，我感觉你很喜欢我，我知道你应该是认真的，不管你之后会对我做出什么希望我们永远能在一起开开心心的。'

            },
                       {
                id:9,
                title:'秀秀',
                click:33,
                add_time:'2019-04-06 23:45:43',
                content:'9我原谅你的那些事情了，我感觉你很喜欢我，我知道你应该是认真的，不管你之后会对我做出什么希望我们永远能在一起开开心心的。'

            }
            ]
            
        }
    },
    created(){
        this.getNewsDetails()
    },
    methods:{
        //使用for （let/var）in 来获取的是索引通过索引确定对应的对应值
        // getNewsDetails(){ 
        //    
        //     for (var i in this.newsinfos){
           
        //         if(this.newsinfos[i].id == this.id){
        //             this.newsinfo = this.newsinfos[i]
                    
        //         }
        //     }
           
        // }
    //使用 for let of 方法直接获取对象数组的值。
        getNewsDetails(){
            for (let val of this.newsinfos){
                    //注意通过$route.params.id 获取的id是string类型，自己定义的则是Number类型。
                    // console.log(typeof(val.id),typeof(this.id))
                    if (val.id == this.id){
                        this.newsinfo = val
                    }
            }
        }
        // getNewsInfo(){
        //     this.$http.get('api/getnew/'+this.id).then(result=>{
        //         if(result.body.status === 0){
        //             this.newsinfo = result.message[0]
        //         }else{
        //             Toast("获取新闻失败！")
        //         }
        //     })
        // }
    },
    components:{
        'comment-box':comment
    }
}
</script>

<style lang="scss">
    .newsinfo-container{
        padding:0 4px 0 0;
        .title{
            font-size: 16px;
            text-align: center;
            margin:15px 0 ;
            color:brown;

        }

        .subtitle{
            font-size: 12px;
            color:blue;
            display:flex ;
            justify-content: space-between;
        }

        .content{
            width: 100%;
            height: 100%;
        }
    }
</style>
